<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <title>Tree Graph</title>
  </head>
  
  <body>
    <select id="layout">
      <option value="dendrogram">系统树</option>
      <option value="compactBox">紧凑树</option>
      <option value="mindmap">脑图布局</option></select>
    <div id="mountNode"></div>
    <script src="assets/hierarchy.js"></script>
    <script src="../build/g6.js"></script>
    <script>
      let currentLayout = 'dendrogram';
      const layouts = {
        dendrogram: {
          type: 'dendrogram',
          direction: 'LR',
          // H / V / LR / RL / TB / BT
          nodeSep: 50,
          rankSep: 100,
          radial: true
        },
        compactBox: {
          type: 'compactBox',
          direction: 'LR',
          getId(d) {
            return d.id;
          },
          getHeight() {
            return 16
          },
          getWidth() {
            return 16
          },
          getVGap() {
            return 50
          },
          getHGap() {
            return 100
          }
        },
        mindmap: {
          type: 'mindmap',
          direction: 'H',
          getHeight() {
            return 16;
          },
          getWidth() {
            return 16;
          },
          getVGap() {
            return 50;
          },
        }
      };
      const graph = new G6.TreeGraph({
        container: 'mountNode',
        width: 500,
        height: 500,
        pixelRatio: 2,
        renderer: 'svg',
        modes: {
          default: ['collapse-expand', 'drag-canvas']
        },
        fitView: true,
        layout: layouts.dendrogram
      });
      graph.node(node => {
        return {
          size: 16,
          anchorPoints: [[0, 0.5], [1, 0.5]],
          style: {
            fill: '#40a9ff',
            stroke: '#096dd9'
          },
          label: node.id,
          labelCfg: {
            position: node.children && node.children.length > 0 ? 'left': 'right'
          }
        }
      });
      let i = 0;
      graph.edge(() => {
        i++;
        return {
          shape: 'cubic-horizontal',
          color: '#A3B1BF',
          label: i
        }
      });
      const data = {
        isRoot: true,
        id: 'Root',
        style: {
          fill: 'red'
        },
        children: [{
          id: 'SubTreeNode1',
          raw: {},
          children: [{
            id: 'SubTreeNode1.1'
          },
          {
            id: 'SubTreeNode1.2',
            children: [{
              id: 'SubTreeNode1.2.1'
            },
            {
              id: 'SubTreeNode1.2.2'
            },
            {
              id: 'SubTreeNode1.2.3'
            }]
          }]
        },
        {
          id: 'SubTreeNode2',
          children: [{
            id: 'SubTreeNode2.1'
          }]
        },
        {
          id: 'SubTreeNode3',
          children: [{
            id: 'SubTreeNode3.1'
          },
          {
            id: 'SubTreeNode3.2'
          },
          {
            id: 'SubTreeNode3.3'
          }]
        },
        {
          id: 'SubTreeNode4'
        },
        {
          id: 'SubTreeNode5'
        },
        {
          id: 'SubTreeNode6'
        },
        {
          id: 'SubTreeNode7',
        },
        {
          id: 'SubTreeNode8'
        },
        {
          id: 'SubTreeNode9'
        },
        {
          id: 'SubTreeNode10'
        },
        {
          id: 'SubTreeNode11'
        }]
      };
      graph.data(data);
      graph.render();
      document.getElementById('layout').addEventListener('change', e => {
        const layout = e.target.value;
        if (currentLayout !== layout) {
          currentLayout = layout;
          graph.changeLayout(layouts[currentLayout]);
        }
      });
    </script>
  </body>

</html>